<template>
  <div class="rig">
    <h3>往期回顾</h3>
     <div class="con">
       <div class="tiao" @click="open">
         <img :src="require('@/assets/img/sky3.jpg')" alt="">
         <div class="trig">
           <p class="title">标题</p>
           <div class="text">内容hifheoihfef efieifjejfefhefrgqvt 5y5 ff</div>
           <p class="date">内容时间</p>
         </div>
       </div>
       <div class="tiao">
         <img :src="require('@/assets/img/sky3.jpg')" alt="">
         <div class="trig">
           <p class="title">标题</p>
           <p class="text">内容</p>
           <p class="date">内容时间</p>
         </div>
       </div>
     </div>
  </div>
  <el-drawer
      title="我是标题"
      v-model="drawer"
      direction="ltr"
      size="50%"
       destroy-on-close>
      <span>我来啦!</span>
    </el-drawer>
</template>

<script lang="ts">
import { ref } from 'vue';
export default {
  setup(){
    let drawer=ref(false)


    let open=()=>{
      drawer.value=true
    }
    return {
      open,drawer
    }
  }
};
</script>

<style lang="less" scoped>

.rig{
  width:100%;
  padding: 10px 10px;
  h3{
    text-align: center;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid blue;
    margin-bottom: 20px;
  }
  .con{
    width: 100%;
    
    
    .tiao{
      width: 100%;
      height: 80px;
      margin-top: 5px;
      border: 1px solid blue;
      img{
        display: block;
        width: 40%;
        height: 80px;
        padding: 2px;
        float: left;
      }
      .trig{
        margin-left: 40%;
        width: 60%;
        padding: 2px;
        height: 80px;

        .title{
          font-size: 16px;
          height: 20px;
           white-space: nowrap;
          text-overflow: ellipsis;
        }
        .text{
          height: 40px;
          line-height: 20px;
          white-space: wrap;
          overflow: hidden;
          font-size: 14px;
          border-top: 1px dashed ;
          border-bottom: 1px dashed ;
        }
        .date{
          font-size: 12px;
          height: 20px;
          text-align: right;
        }
      }
    }
  }
}
</style>